<template>
<van-nav-bar>
  <template #left>
  <div @click="onClickcity" class="city">城市</div>
  </template>


  <template #title>
  <van-search v-model="value" background="#4fc08d" shape="round"
   placeholder="卡姿兰大眼睛" @click="onSearch"/>
  </template>

  <template #right>
  <div @click="onClicklogin" v-if="show" class="login">登录</div>
  <div @click="onClickmine" v-else class="login">我的</div>
  </template>
</van-nav-bar>
</template>

<script setup>
import{ref,reactive,computed,watch,defineProps,defineEmits} from 'vue'
import {useRouter} from "vue-router"
let router=useRouter()
let onClicklogin=()=>{
     router.push("/login")
}
let onClickmine=()=>{
     router.push("/user")
}
let onClickcity=()=>{
     router.push("/city")
}
const onSearch=()=>{
    router.push("/search")
}
const value=ref("")
// 根据token来判断显示我的还是登录
const show=ref(localStorage.getItem("token")?false:true)
</script>
<style scoped lang="scss">
.van-search{
    padding: 0;
    width:210px;
     :deep(.van-field__left-icon) {
            display: none;
        }
}
.city{
   margin-right: 5px;
   font-size: 18px;
   font-weight: 600;
    }
.login{
    font-size: 18px;
    font-weight: 600;
    }
.van-nav-bar{
  width:100%;
  background-color:#4fc08d;
}

</style>